<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="ESLint 配置, 小康,xkloveme,博客">
    <meta name="description" content="ESLint 配置ESlint 被设计为完全可配置的，这意味着你可以关闭每一个规则而只运行基本语法验证，或混合和匹配 ESLint 默认绑定的规则和你的自定义规则，以让 ESLint 更适合你的项目。有两种主要的方式来配置 ESLint：
">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>ESLint 配置 | 小康之家</title>
    <link rel="icon" type="image/x-icon, image/vnd.microsoft.icon" href="/favicon.ico">

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/5.12.1/css/all.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/aos/3.0.0-beta.6/aos.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/lightgallery/1.6.11/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    
<meta name="generator" content="Hexo 4.2.0"><link rel="alternate" href="/atom.xml" title="小康之家" type="application/atom+xml">
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>


<body >
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper head-container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <img src="/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">小康之家</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>

<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">小康之家</div>
        <div class="logo-desc">
            
            小康のblog
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
        <li><div class="divider"></div></li>
        <li>
            <a href="https://github.com/xkloveme" class="waves-effect waves-light" target="_blank">
                <i class="fab fa-github-square fa-fw"></i>Fork Me
            </a>
        </li>
        
    </ul>
</div>

        </div>

        
            <style>
  .nav-transparent .github-corner {
    display: none !important;
  }

  .github-corner {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    border: 0;
    transform: scale(1.1);
  }

  .github-corner svg {
    color: #027aff;
    fill: #fff;
    height: 64px;
    width: 64px;
  }

  .github-corner:hover .octo-arm {
    animation: a 0.56s ease-in-out;
  }

  .github-corner .octo-arm {
    animation: none;
  }

  @keyframes a {
    0%,
    to {
      transform: rotate(0);
    }
    20%,
    60% {
      transform: rotate(-25deg);
    }
    40%,
    80% {
      transform: rotate(10deg);
    }
  }
</style>

<a
  href="https://github.com/xkloveme"
  class="github-corner tooltipped hide-on-med-and-down"
  target="_blank"
  data-tooltip="Fork Me"
  data-position="left"
  data-delay="50"
>
  <svg viewBox="0 0 250 250" aria-hidden="true">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
    <path
      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
      fill="currentColor"
      style="transform-origin: 130px 106px;"
      class="octo-arm"
    ></path>
    <path
      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
      fill="currentColor"
      class="octo-body"
    ></path>
  </svg>
</a>

        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('https://picsum.photos/600/300?t=dc5mjg15lh')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <div class="description center-align post-title">
                        ESLint 配置
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="https://cdn.bootcss.com/tocbot/4.10.0/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #toc-content .is-active-link::before {
        background-color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/tags/%E6%8A%80%E6%9C%AF/">
                                <span class="chip bg-color">技术</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/categories/%E6%95%99%E7%A8%8B/" class="post-category">
                                教程
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2018-03-12
                </div>
                

                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    7.2k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    28 分
                </div>
                
				
                
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
            
        </div>
        <hr class="clearfix">
        <div class="card-content article-card-content">
            <div id="articleContent">
                <h1 id="ESLint-配置"><a href="#ESLint-配置" class="headerlink" title="ESLint 配置"></a>ESLint 配置</h1><p>ESlint 被设计为完全可配置的，这意味着你可以关闭每一个规则而只运行基本语法验证，或混合和匹配 ESLint 默认绑定的规则和你的自定义规则，以让 ESLint 更适合你的项目。有两种主要的方式来配置 ESLint：</p>
<ol>
<li><strong>Configuration Comments</strong> - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。</li>
<li><strong>Configuration Files</strong> - 使用 JavaScript、JSON 或者 YAML 文件为整个目录和它的子目录指定配置信息。可以配置一个独立的 <a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/user-guide/configuring#configuration-file-formats" target="_blank" rel="noopener">.eslintrc.*</a> 文件，或者直接在 <a href="https://link.jianshu.com?t=https://docs.npmjs.com/files/package.json" target="_blank" rel="noopener"><code>package.json</code></a> 文件里的 <code>eslintConfig</code> 字段指定配置，ESLint 会查找和自动读取它们，再者，你可以在<a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/user-guide/command-line-interface" target="_blank" rel="noopener">命令行</a>运行时指定一个任意的配置文件。</li>
</ol>
<p>有很多信息可以配置：</p>
<ul>
<li><strong>Environments</strong> - 指定脚本的运行环境。每种环境都会有一组特定的预定义全局变量。</li>
<li><strong>Globals</strong> - 脚本在执行期间访问的额外的全局变量。</li>
<li><strong>Rules</strong> - 启用的规则及其各自的错误级别。</li>
</ul>
<p>所有这些选项让你可以细粒度地控制 ESLint 如何对待你的代码。</p>
<h2 id="指定解析器选项"><a href="#指定解析器选项" class="headerlink" title="指定解析器选项"></a>指定解析器选项</h2><p>ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。</p>
<p>请注意，对 JSX 语法的支持不用于对 React 的支持。React 使用了一些特定的 ESLint 无法识别的 JSX 语法。如果你正在使用 React 并且想要 React 语义支持，我们推荐你使用 <a href="https://link.jianshu.com?t=https://github.com/yannickcr/eslint-plugin-react" target="_blank" rel="noopener">eslint-plugin-react</a>。</p>
<p>同样的，支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型（比如 <code>Set</code> 等新类型）。使用 <code>{ &quot;parserOptions&quot;: { &quot;ecmaVersion&quot;: 6 } }</code> 来启用 ES6 语法支持；要额外支持新的 ES6 全局变量，使用 <code>{ &quot;env&quot;:{ &quot;es6&quot;: true } }</code>(这个设置会同时自动启用 ES6 语法支持)。</p>
<p>解析器选项可以在 <code>.eslintrc.*</code> 文件使用 <code>parserOptions</code> 属性设置。可用的选项有：</p>
<ul>
<li><code>ecmaVersion</code> - 默认设置为 5， 你可以使用 3、5、6、7 或 8 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）</li>
<li><code>sourceType</code> - 设置为 <code>&quot;script&quot;</code> (默认) 或 <code>&quot;module&quot;</code>（如果你的代码是 ECMAScript 模块)。</li>
<li><code>ecmaFeatures</code> - 这是个对象，表示你想使用的额外的语言特性:<code>globalReturn</code> - 允许在全局作用域下使用 <code>return</code> 语句<code>impliedStrict</code> - 启用全局 <a href="https://link.jianshu.com?t=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode" target="_blank" rel="noopener">strict mode</a> (如果 <code>ecmaVersion</code> 是 5 或更高)<code>jsx</code> - 启用 <a href="https://link.jianshu.com?t=http://facebook.github.io/jsx/" target="_blank" rel="noopener">JSX</a><code>experimentalObjectRestSpread</code> - 启用实验性的 <a href="https://link.jianshu.com?t=https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank" rel="noopener">object rest/spread properties</a> 支持。(<strong>重要：</strong>这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 <strong>不要</strong> 依赖该功能，除非当它发生改变时你愿意承担维护成本。)</li>
</ul>
<p><code>.eslintrc.json</code> 文件示例：</p>
<pre><code>{
    &quot;parserOptions&quot;: {
        &quot;ecmaVersion&quot;: 6,
        &quot;sourceType&quot;: &quot;module&quot;,
        &quot;ecmaFeatures&quot;: {
            &quot;jsx&quot;: true
        }
    },
    &quot;rules&quot;: {
        &quot;semi&quot;: 2
    }
}</code></pre><p>设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 <code>false</code>。</p>
<h2 id="指定解析器"><a href="#指定解析器" class="headerlink" title="指定解析器"></a>指定解析器</h2><p>ESLint 默认使用<a href="https://link.jianshu.com?t=https://github.com/eslint/espree" target="_blank" rel="noopener">Espree</a>作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：</p>
<ol>
<li>它必须是本地安装的一个 npm 模块。</li>
<li>它必须有兼容 Esprima 的接口（它必须输出一个 <code>parse()</code> 方法）</li>
<li>它必须产出兼容 Esprima 的 AST 和 token 对象。</li>
</ol>
<p>注意，即使满足这些兼容性要求，也不能保证一个外部解析器可以与 ESLint 正常配合工作，ESLint 也不会修复与其它解析器不兼容的相关 bug。</p>
<p>为了表明使用该 npm 模块作为你的解析器，你需要在你的 <code>.eslintrc</code> 文件里指定 <code>parser</code> 选项。例如，下面的配置指定了 Esprima 作为解析器：</p>
<pre><code>{
    &quot;parser&quot;: &quot;esprima&quot;,
    &quot;rules&quot;: {
        &quot;semi&quot;: &quot;error&quot;
    }
}</code></pre><p>以下解析器与 ESLint 兼容：</p>
<ul>
<li><a href="https://link.jianshu.com?t=https://npmjs.com/package/esprima" target="_blank" rel="noopener">Esprima</a></li>
<li><a href="https://link.jianshu.com?t=https://npmjs.com/package/babel-eslint" target="_blank" rel="noopener">Babel-ESLint</a> - 一个对<a href="https://link.jianshu.com?t=http://babeljs.io/" target="_blank" rel="noopener">Babel</a>解析器的包装，使其能够与 ESLint 兼容。</li>
<li><a href="https://link.jianshu.com?t=https://npmjs.com/package/typescript-eslint-parser" target="_blank" rel="noopener">typescript-eslint-parser(实验)</a> - 一个把 TypeScript 转换为 ESTree 兼容格式的解析器，这样它就可以在 ESLint 中使用了。这样做的目的是通过 ESLint 来解析 TypeScript 文件（尽管不一定必须通过所有的 ESLint 规则）。</li>
</ul>
<p>注意，在使用自定义解析器时，为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作，配置属性 <code>parserOptions</code> 仍然是必须的。解析器会被传入 <code>parserOptions</code>，但是不一定会使用它们来决定功能特性的开关。</p>
<h2 id="指定环境"><a href="#指定环境" class="headerlink" title="指定环境"></a>指定环境</h2><p>一个“环境”定义了一组预定义的全局变量。可用的环境包括：</p>
<ul>
<li><code>browser</code> - 浏览器环境中的全局变量。</li>
<li><code>node</code> - Node.js 全局变量和 Node.js 作用域。</li>
<li><code>commonjs</code> - CommonJS 全局变量和 CommonJS 作用域 (一般用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。</li>
<li><code>shared-node-browser</code> - Node 和 Browser 通用全局变量。</li>
<li><code>es6</code> - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 <code>ecmaVersion</code> 解析器选项为 6）。</li>
<li><code>worker</code> - Web Workers 全局变量。</li>
<li><code>amd</code> - 将 <code>require()</code> 和 <code>define()</code> 定义为像 <a href="https://link.jianshu.com?t=https://github.com/amdjs/amdjs-api/wiki/AMD" target="_blank" rel="noopener">amd</a> 一样的全局变量。</li>
<li><code>mocha</code> - 添加所有的 Mocha 测试全局变量。</li>
<li><code>jasmine</code> - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。</li>
<li><code>jest</code> - Jest 全局变量。</li>
<li><code>phantomjs</code> - PhantomJS 全局变量。</li>
<li><code>protractor</code> - Protractor 全局变量。</li>
<li><code>qunit</code> - QUnit 全局变量。</li>
<li><code>jquery</code> - jQuery 全局变量。</li>
<li><code>prototypejs</code> - Prototype.js 全局变量。</li>
<li><code>shelljs</code> - ShellJS 全局变量。</li>
<li><code>meteor</code> - Meteor 全局变量。</li>
<li><code>mongo</code> - MongoDB 全局变量。</li>
<li><code>applescript</code> - AppleScript 全局变量。</li>
<li><code>nashorn</code> - Java 8 Nashorn 全局变量。</li>
<li><code>serviceworker</code> - Service Worker 全局变量。</li>
<li><code>atomtest</code> - Atom 测试全局变量。</li>
<li><code>embertest</code> - Ember 测试全局变量。</li>
<li><code>webextensions</code> - WebExtensions 全局变量。</li>
<li><code>greasemonkey</code> - GreaseMonkey 全局变量。</li>
</ul>
<p>这些环境并不是互斥的，所以你可以同时定义多个。</p>
<p>可以在源文件里、在配置文件中或使用 <a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/user-guide/command-line-interface" target="_blank" rel="noopener">命令行</a> 的 <code>--env</code> 选项来指定环境。</p>
<p>要在你的 JavaScript 文件中使用注释来指定环境，格式如下：</p>
<pre><code>/* eslint-env node, mocha */</code></pre><p>该设置启用了 Node.js 和 Mocha 环境。</p>
<p>要在配置文件里指定环境，使用 <code>env</code> 关键字指定你想启用的环境，并设置它们为 <code>true</code>。例如，以下示例启用了 browser 和 Node.js 的环境：</p>
<pre><code>{
    &quot;env&quot;: {
        &quot;browser&quot;: true,
        &quot;node&quot;: true
    }
}</code></pre><p>或在 <code>package.json</code> 文件中：</p>
<pre><code>{
    &quot;name&quot;: &quot;mypackage&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;eslintConfig&quot;: {
        &quot;env&quot;: {
            &quot;browser&quot;: true,
            &quot;node&quot;: true
        }
    }
}</code></pre><p>在 YAML 文件中：</p>
<pre><code>---
  env:
    browser: true
    node: true</code></pre><p>如果你想在一个特定的插件中使用一种环境，确保提前在 <code>plugins</code> 数组里指定了插件名，然后在 env 配置中不带前缀的插件名后跟一个 <code>/</code> ，紧随着环境名。例如：</p>
<pre><code>{
    &quot;plugins&quot;: [&quot;example&quot;],
    &quot;env&quot;: {
        &quot;example/custom&quot;: true
    }
}</code></pre><p>或在 <code>package.json</code> 文件中</p>
<pre><code>{
    &quot;name&quot;: &quot;mypackage&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;eslintConfig&quot;: {
        &quot;plugins&quot;: [&quot;example&quot;],
        &quot;env&quot;: {
            &quot;example/custom&quot;: true
        }
    }
}</code></pre><p>在 YAML 文件中：</p>
<pre><code>---
  plugins:
    - example
  env:
    example/custom: true</code></pre><h2 id="指定全局变量"><a href="#指定全局变量" class="headerlink" title="指定全局变量"></a>指定全局变量</h2><p>当访问当前源文件内未定义的变量时，<a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/rules/no-undef" target="_blank" rel="noopener">no-undef</a> 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。</p>
<p>要在你的 JavaScript 文件中，用注释指定全局变量，格式如下：</p>
<pre><code>/* global var1, var2 */</code></pre><p>这里定义了两个全局变量：<code>var1</code> 和 <code>var2</code>。如果你想指定这些变量不应被重写（只读），你可以将它们设置为 <code>false</code>：</p>
<pre><code>/* global var1:false, var2:false */</code></pre><p>在配置文件里配置全局变量时，使用 <code>globals</code> 指出你要使用的全局变量。将变量设置为 <code>true</code> 将允许变量被重写，或 <code>false</code> 将不允许被重写。比如：</p>
<pre><code>{
    &quot;globals&quot;: {
        &quot;var1&quot;: true,
        &quot;var2&quot;: false
    }
}</code></pre><p>在 YAML 中：</p>
<pre><code>---
  globals:
    var1: true
    var2: false</code></pre><p>在这些例子中 <code>var1</code> 允许被重写，<code>var2</code> 不允许被重写。</p>
<p><strong>注意：</strong> 要启用<a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/rules/no-global-assign" target="_blank" rel="noopener">no-global-assign</a>规则来禁止对只读的全局变量进行修改。</p>
<h2 id="配置插件"><a href="#配置插件" class="headerlink" title="配置插件"></a>配置插件</h2><p>ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。</p>
<p>在配置文件里配置插件时，可以使用 <code>plugins</code> 关键字来存放插件名字的列表。插件名称可以省略 <code>eslint-plugin-</code> 前缀。</p>
<pre><code>{
    &quot;plugins&quot;: [
        &quot;plugin1&quot;,
        &quot;eslint-plugin-plugin2&quot;
    ]
}</code></pre><p>在 YAML 中：</p>
<pre><code>---
  plugins:
    - plugin1
    - eslint-plugin-plugin2</code></pre><p><strong>注意：</strong>全局安装的 ESLint 只能使用全局安装的插件。本地安装的 ESLint 不仅可以使用本地安装的插件，也可以使用全局安装的插件。</p>
<h2 id="配置规则"><a href="#配置规则" class="headerlink" title="配置规则"></a>配置规则</h2><p>ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：</p>
<ul>
<li><code>&quot;off&quot;</code> 或 <code>0</code> - 关闭规则</li>
<li><code>&quot;warn&quot;</code> 或 <code>1</code> - 开启规则，使用警告级别的错误：<code>warn</code> (不会导致程序退出)</li>
<li><code>&quot;error&quot;</code> 或 <code>2</code> - 开启规则，使用错误级别的错误：<code>error</code> (当被触发的时候，程序会退出)</li>
</ul>
<p>为了在文件注释里配置规则，使用以下格式的注释：</p>
<pre><code>/* eslint eqeqeq: &quot;off&quot;, curly: &quot;error&quot; */</code></pre><p>在这个例子里，<a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/rules/eqeqeq" target="_blank" rel="noopener"><code>eqeqeq</code></a> 规则被关闭，<a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/rules/curly" target="_blank" rel="noopener"><code>curly</code></a> 规则被打开，定义为错误级别。你也可以使用对应的数字定义规则严重程度：</p>
<pre><code>/* eslint eqeqeq: 0, curly: 2 */</code></pre><p>这个例子和上个例子是一样的，只不过它是用的数字而不是字符串。<code>eqeqeq</code> 规则是关闭的，<code>curly</code> 规则被设置为错误级别。</p>
<p>如果一个规则有额外的选项，你可以使用数组字面量指定它们，比如：</p>
<pre><code>/* eslint quotes: [&quot;error&quot;, &quot;double&quot;], curly: 2 */</code></pre><p>这条注释为规则 <a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/rules/quotes" target="_blank" rel="noopener"><code>quotes</code></a> 指定了 “double”选项。数组的第一项总是规则的严重程度（数字或字符串）。</p>
<p>还可以使用 <code>rules</code> 连同错误级别和任何你想使用的选项，在配置文件中进行规则配置。例如：</p>
<pre><code>{
    &quot;rules&quot;: {
        &quot;eqeqeq&quot;: &quot;off&quot;,
        &quot;curly&quot;: &quot;error&quot;,
        &quot;quotes&quot;: [&quot;error&quot;, &quot;double&quot;]
    }
}</code></pre><p>在 YAML 中：</p>
<pre><code>---
rules:
  eqeqeq: off
  curly: error
  quotes:
    - error
    - double</code></pre><p>配置定义在插件中的一个规则的时候，你必须使用 <code>插件名/规则ID</code> 的形式。比如：</p>
<pre><code>{
    &quot;plugins&quot;: [
        &quot;plugin1&quot;
    ],
    &quot;rules&quot;: {
        &quot;eqeqeq&quot;: &quot;off&quot;,
        &quot;curly&quot;: &quot;error&quot;,
        &quot;quotes&quot;: [&quot;error&quot;, &quot;double&quot;],
        &quot;plugin1/rule1&quot;: &quot;error&quot;
    }
}</code></pre><p>在 YAML 中：</p>
<pre><code>---
plugins:
  - plugin1
rules:
  eqeqeq: 0
  curly: error
  quotes:
    - error
    - &quot;double&quot;
  plugin1/rule1: error</code></pre><p>在这些配置文件中，规则 <code>plugin1/rule1</code> 表示来自插件 <code>plugin1</code> 的 <code>rule1</code> 规则。你也可以使用这种格式的注释配置，比如：</p>
<pre><code>/* eslint &quot;plugin1/rule1&quot;: &quot;error&quot; */</code></pre><p><strong>注意：</strong>当指定来自插件的规则时，确保删除 <code>eslint-plugin-</code> 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。</p>
<h2 id="使用行注释禁用规则"><a href="#使用行注释禁用规则" class="headerlink" title="使用行注释禁用规则"></a>使用行注释禁用规则</h2><p>可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告：</p>
<pre><code>/* eslint-disable */

alert(&#39;foo&#39;);

/* eslint-enable */</code></pre><p>你也可以对指定的规则启用或禁用警告:</p>
<pre><code>/* eslint-disable no-alert, no-console */

alert(&#39;foo&#39;);
console.log(&#39;bar&#39;);

/* eslint-enable no-alert, no-console */</code></pre><p>如果在整个文件范围内禁止规则出现警告，将 <code>/* eslint-disable */</code> 块注释放在文件顶部：</p>
<pre><code>/* eslint-disable */

alert(&#39;foo&#39;);</code></pre><p>你也可以对整个文件启用或禁用警告:</p>
<pre><code>/* eslint-disable no-alert */

// Disables no-alert for the rest of the file
alert(&#39;foo&#39;);</code></pre><p>可以在你的文件中使用以下格式的行注释在某一特定的行上禁用所有规则：</p>
<pre><code>alert(&#39;foo&#39;); // eslint-disable-line

// eslint-disable-next-line
alert(&#39;foo&#39;);</code></pre><p>在某一特定的行上禁用某个指定的规则：</p>
<pre><code>alert(&#39;foo&#39;); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert(&#39;foo&#39;);</code></pre><p>在某个特定的行上禁用多个规则：</p>
<pre><code>alert(&#39;foo&#39;); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert(&#39;foo&#39;);</code></pre><p>上面的所有方法同样适用于插件规则。例如，禁止 <code>eslint-plugin-example</code> 的 <code>rule-name</code> 规则，把插件名（<code>example</code>）和规则名（<code>rule-name</code>）结合为 <code>example/rule-name</code>：</p>
<pre><code>foo(); // eslint-disable-line example/rule-name</code></pre><p><strong>注意：</strong>为文件的某部分禁用警告的注释，告诉 ESLint 不要对禁用的代码报告规则的冲突。ESLint 仍解析整个文件，然而，禁用的代码仍需要是有效的 JavaScript 语法。</p>
<h2 id="添加分享配置"><a href="#添加分享配置" class="headerlink" title="添加分享配置"></a>添加分享配置</h2><p>ESLint 支持在配置文件添加共享设置。你可以添加 <code>settings</code> 对象到配置文件，它将提供给每一个将被执行的规则。如果你想添加的自定义规则而且使它们可以访问到相同的信息，这将会很有用，并且很容易配置。</p>
<p>在 JSON 中：</p>
<pre><code>{
    &quot;settings&quot;: {
        &quot;sharedData&quot;: &quot;Hello&quot;
    }
}</code></pre><p>在 YAML 中：</p>
<pre><code>---
  settings:
    sharedData: &quot;Hello&quot;</code></pre><h2 id="使用配置文件"><a href="#使用配置文件" class="headerlink" title="使用配置文件"></a>使用配置文件</h2><p>有两种方式可以使用配置文件。第一种是将文件保存到你喜欢的地方，然后将它的位置使用 <code>-c</code> 选项传递命令行，比如：</p>
<pre><code>eslint -c myconfig.json myfiletotest.js</code></pre><p>第二种方式是通过 <code>.eslintrc.*</code> 和 <code>package.json</code>。ESLint 将自动在要检测的文件目录里寻找它们，紧接着是父级目录，一直到文件系统的根目录。当你想对一个项目的不同部分的使用不同配置，或当你希望别人能够直接使用 ESLint，而无需记住要在配置文件中传递什么，这种方式就很有用。</p>
<p>每种情况，配置文件都会覆盖默认设置。</p>
<h2 id="配置文件文件格式"><a href="#配置文件文件格式" class="headerlink" title="配置文件文件格式"></a>配置文件文件格式</h2><p>ESLint 支持几种格式的配置文件：</p>
<ul>
<li><strong>JavaScript</strong> - 使用 <code>.eslintrc.js</code> 然后输出一个配置对象。</li>
<li><strong>YAML</strong> - 使用 <code>.eslintrc.yaml</code> 或 <code>.eslintrc.yml</code> 去定义配置的结构。</li>
<li><strong>JSON</strong> - 使用 <code>.eslintrc.json</code> 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。</li>
<li><strong>(不推荐)</strong> - 使用 <code>.eslintrc</code>，可以使 JSON 也可以是 YAML。</li>
<li><strong>package.json</strong> - 在 <code>package.json</code> 里创建一个 <code>eslintConfig</code>属性，在那里定义你的配置。</li>
</ul>
<p>如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：</p>
<ol>
<li><code>.eslintrc.js</code></li>
<li><code>.eslintrc.yaml</code></li>
<li><code>.eslintrc.yml</code></li>
<li><code>.eslintrc.json</code></li>
<li><code>.eslintrc</code></li>
<li><code>package.json</code></li>
</ol>
<h2 id="配置的层级和继承"><a href="#配置的层级和继承" class="headerlink" title="配置的层级和继承"></a>配置的层级和继承</h2><p>当使用 <code>.eslintrc.*</code> 和 <code>package.json</code>文件的配置时，你可以利用层叠配置。例如，假如你有以下结构：</p>
<pre><code>your-project
├── .eslintrc
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js</code></pre><p>层叠配置使用离要检测的文件最近的 <code>.eslintrc</code>文件作为最高优先级，然后才是父目录里的配置文件，等等。当你在这个项目中允许 ESLint 时，<code>lib/</code>下面的所有文件将使用项目根目录里的 <code>.eslintrc</code> 文件作为它的配置文件。当 ESLint 遍历到 <code>test/</code> 目录，<code>your-project/.eslintrc</code> 之外，它还会用到 <code>your-project/tests/.eslintrc</code>。所以 <code>your-project/tests/test.js</code> 是基于它的目录层次结构中的两个<code>.eslintrc</code> 文件的组合，并且离的最近的一个优先。通过这种方式，你可以有项目级 ESLint 设置，也有覆盖特定目录的 ESLint 设置。</p>
<p>同样的，如果在根目录的 <code>package.json</code> 文件中有一个 <code>eslintConfig</code> 字段，其中的配置将使用于所有子目录，但是当 <code>tests</code> 目录下的 <code>.eslintrc</code> 文件中的规则与之发生冲突时，就会覆盖它。</p>
<pre><code>your-project
├── package.json
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js</code></pre><p>如果同一目录下 <code>.eslintrc</code> 和 <code>package.json</code> 同时存在，<code>.eslintrc</code> 优先级高会被使用，<code>package.json</code> 文件将不会被使用。</p>
<p><strong>注意：</strong>如果在你的主目录下有一个自定义的配置文件 (<code>~/.eslintrc</code>) ，如果没有其它配置文件时它才会被使用。因为个人配置将适用于用户目录下的所有目录和文件，包括第三方的代码，当 ESLint 运行时可能会导致问题。</p>
<p>默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 <code>package.json</code> 文件或者 <code>.eslintrc.*</code> 文件里的 <code>eslintConfig</code> 字段下设置 <code>&quot;root&quot;: true</code>。ESLint 一旦发现配置文件中有 <code>&quot;root&quot;: true</code>，它就会停止在父级目录中寻找。</p>
<pre><code>{
    &quot;root&quot;: true
}</code></pre><p>在 YAML 中：</p>
<pre><code>---
  root: true</code></pre><p>例如，<code>projectA</code> 的 <code>lib/</code> 目录下的 <code>.eslintrc</code> 文件中设置了 <code>&quot;root&quot;: true</code>。这种情况下，当检测 <code>main.js</code> 时，<code>lib/</code> 下的配置将会被使用，<code>projectA/</code> 下的 <code>.eslintrc</code> 将不会被使用。</p>
<pre><code>home
└── user
    ├── .eslintrc &lt;- Always skipped if other configs present
    └── projectA
        ├── .eslintrc  &lt;- Not used
        └── lib
            ├── .eslintrc  &lt;- { &quot;root&quot;: true }
            └── main.js</code></pre><p>完整的配置层次结构，从最高优先级最低的优先级，如下:</p>
<ol>
<li>行内配置<ol>
<li><code>/*eslint-disable*/</code> 和 <code>/*eslint-enable*/</code></li>
<li><code>/*global*/</code></li>
<li><code>/*eslint*/</code></li>
<li><code>/*eslint-env*/</code></li>
</ol>
</li>
<li>命令行选项：<ol>
<li><code>--global</code></li>
<li><code>--rule</code></li>
<li><code>--env</code></li>
<li><code>-c</code>、<code>--config</code></li>
</ol>
</li>
<li>项目级配置：<ol>
<li>与要检测的文件在同一目录下的 <code>.eslintrc.*</code> 或 <code>package.json</code> 文件</li>
<li>继续在父级目录寻找 <code>.eslintrc</code> 或 <code>package.json</code>文件，直到根目录（包括根目录）或直到发现一个有<code>&quot;root&quot;: true</code>的配置。</li>
<li>如果不是（1）到（3）中的任何一种情况，退回到 <code>~/.eslintrc</code> 中自定义的默认配置。</li>
</ol>
</li>
</ol>
<h2 id="扩展配置文件"><a href="#扩展配置文件" class="headerlink" title="扩展配置文件"></a>扩展配置文件</h2><p>一个配置文件可以被基础配置中的已启用的规则继承。</p>
<p><code>extends</code> 属性值可以是：</p>
<ul>
<li>在配置中指定的一个字符串</li>
<li>字符串数组：每个配置继承它前面的配置</li>
</ul>
<p>ESLint 递归地进行扩展配置，所以一个基础的配置也可以有一个 <code>extends</code> 属性。</p>
<p><code>rules</code> 属性可以做下面的任何事情以扩展（或覆盖）规则：</p>
<ul>
<li>启用额外的规则</li>
<li>改变继承的规则级别而不改变它的选项：<ul>
<li>基础配置：<code>&quot;eqeqeq&quot;: [&quot;error&quot;, &quot;allow-null&quot;]</code></li>
<li>派生的配置：<code>&quot;eqeqeq&quot;: &quot;warn&quot;</code></li>
<li>最后生成的配置：<code>&quot;eqeqeq&quot;: [&quot;warn&quot;, &quot;allow-null&quot;]</code></li>
</ul>
</li>
<li>覆盖基础配置中的规则的选项<ul>
<li>基础配置：<code>&quot;quotes&quot;: [&quot;error&quot;, &quot;single&quot;, &quot;avoid-escape&quot;]</code></li>
<li>派生的配置：<code>&quot;quotes&quot;: [&quot;error&quot;, &quot;single&quot;]</code></li>
<li>最后生成的配置：<code>&quot;quotes&quot;: [&quot;error&quot;, &quot;single&quot;]</code></li>
</ul>
</li>
</ul>
<h3 id="使用-eslint-recommended"><a href="#使用-eslint-recommended" class="headerlink" title="使用 eslint:recommended"></a>使用 eslint:recommended</h3><p>值为 <code>&quot;eslint:recommended&quot;</code> 的 <code>extends</code> 属性启用一系列核心规则，这些规则报告一些常见问题，在 <a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/rules/" target="_blank" rel="noopener">规则页面</a> 中被标记为 。这个推荐的子集只能在 ESLint 主要版本进行更新。</p>
<p>如果你的配置集成了推荐的规则：在你升级到 ESLint 新的主版本之后，在你使用<a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/user-guide/command-line-interface#fix" target="_blank" rel="noopener">命令行</a>的 <code>--fix</code> 选项之前，检查一下报告的问题，这样你就知道一个新的可修复的推荐的规则将更改代码。</p>
<p><code>eslint --init</code> 命令可以创建一个配置，这样你就可以继承推荐的规则。</p>
<p>JavaScript 格式的一个配置文件的例子：</p>
<pre><code>module.exports = {
    &quot;extends&quot;: &quot;eslint:recommended&quot;,
    &quot;rules&quot;: {
        // enable additional rules
        &quot;indent&quot;: [&quot;error&quot;, 4],
        &quot;linebreak-style&quot;: [&quot;error&quot;, &quot;unix&quot;],
        &quot;quotes&quot;: [&quot;error&quot;, &quot;double&quot;],
        &quot;semi&quot;: [&quot;error&quot;, &quot;always&quot;],

        // override default options for rules from base configurations
        &quot;comma-dangle&quot;: [&quot;error&quot;, &quot;always&quot;],
        &quot;no-cond-assign&quot;: [&quot;error&quot;, &quot;always&quot;],

        // disable rules from base configurations
        &quot;no-console&quot;: &quot;off&quot;,
    }
}</code></pre><h3 id="使用可共享的配置包"><a href="#使用可共享的配置包" class="headerlink" title="使用可共享的配置包"></a>使用可共享的配置包</h3><p><a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/developer-guide/shareable-configs" target="_blank" rel="noopener">可共享的配置</a> 是一个 npm 包，它输出一个配置对象。要确保这个包安装在 ESLint 能请求到的目录下。</p>
<p><code>extends</code> 属性值可以省略包名的前缀 <code>eslint-config-</code>。</p>
<p><code>eslint --init</code> 命令可以创建一个配置，这样你就可以扩展一个流行的风格指南（比如，<code>eslint-config-standard</code>）。</p>
<p>YAML 格式的一个配置文件的例子：</p>
<pre><code>extends: standard
rules:
  comma-dangle:
    - error
    - always
  no-empty: warn</code></pre><h3 id="使用插件中的配置"><a href="#使用插件中的配置" class="headerlink" title="使用插件中的配置"></a>使用插件中的配置</h3><p><a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/developer-guide/working-with-plugins" target="_blank" rel="noopener">插件</a> 是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 <a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/developer-guide/working-with-plugins#configs-in-plugins" target="_blank" rel="noopener">配置</a>。要确保这个包安装在 ESLint 能请求到的目录下。</p>
<p><code>plugins</code> <a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/user-guide/configuring#configuring-plugins" target="_blank" rel="noopener">属性值</a> 可以省略包名的前缀 <code>eslint-plugin-</code>。</p>
<p><code>extends</code> 属性值可以由以下组成：</p>
<ul>
<li><code>plugin:</code></li>
<li>包名 (省略了前缀，比如，<code>react</code>)</li>
<li><code>/</code></li>
<li>配置名称 (比如 <code>recommended</code>)</li>
</ul>
<p>JSON 格式的一个配置文件的例子：</p>
<pre><code>{
    &quot;plugins&quot;: [
        &quot;react&quot;
    ],
    &quot;extends&quot;: [
        &quot;eslint:recommended&quot;,
        &quot;plugin:react/recommended&quot;
    ],
    &quot;rules&quot;: {
       &quot;no-set-state&quot;: &quot;off&quot;
    }
}</code></pre><h3 id="使用一个配置文件"><a href="#使用一个配置文件" class="headerlink" title="使用一个配置文件"></a>使用一个配置文件</h3><p><code>extends</code> 属性值可以是基本<a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/user-guide/configuring#using-configuration-files" target="_blank" rel="noopener">配置文件</a>的绝对路径或相对路径。</p>
<p>ESLint 解析基本配置文件的相对路径相对你你使用的配置文件，<strong>除非</strong>那个文件在你的主目录或非 ESLint 安装目录的父级目录。在这些情况下，ESLint 解析基本配合文件的相对路径相对于被检测的 <strong>项目</strong>目录（尤其是当前工作目录）。</p>
<p>JSON 格式的一个配置文件的例子：</p>
<pre><code>{
    &quot;extends&quot;: [
        &quot;./node_modules/coding-standard/eslintDefaults.js&quot;,
        &quot;./node_modules/coding-standard/.eslintrc-es6&quot;,
        &quot;./node_modules/coding-standard/.eslintrc-jsx&quot;
    ],
    &quot;rules&quot;: {
        &quot;eqeqeq&quot;: &quot;warn&quot;
    }
}</code></pre><h3 id="使用-eslint-all"><a href="#使用-eslint-all" class="headerlink" title="使用 eslint:all"></a>使用 eslint:all</h3><p><code>extends</code> 属性值可以是 <code>&quot;eslint:all&quot;</code>，启用当前安装的 ESLint 中所有的核心规则。这些规则可以在 ESLint 的任何版本进行更改。</p>
<p><strong>重要：</strong>这些配置 <strong>不推荐在产品中使用</strong>，因为它随着 ESLint 版本进行更改。使用的话，请自己承担风险。</p>
<p>如果你配置 ESLint 升级时自动地启用新规则，当源码没有任何改变时，ESLint 可以报告新问题，因此任何 ESLint 的新的小版本好像有破坏性的更改。</p>
<p>当你决定在一个项目上使用的规则和选项，尤其是如果你很少覆盖选项或禁用规则，你可能启用所有核心规则作为一种快捷方式使用。规则的默认选项并不是 ESLint 推荐的（例如，<code>quotes</code> 规则的默认选项并不意味着双引号要比单引号好）。</p>
<p>如果你的配置扩展了所有的核心规则：在你升级到一个新的大或小的 ESLint 版本，在你使用<a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/user-guide/command-line-interface#fix" target="_blank" rel="noopener">命令行</a>的 <code>--fix</code> 选项之前，检查一下报告的问题，这样你就知道一个新的可修复的规则将更改代码。</p>
<p>JavaScript 格式的一个配置文件的例子：</p>
<pre><code>module.exports = {
    &quot;extends&quot;: &quot;eslint:all&quot;,
    &quot;rules&quot;: {
        // override default options
        &quot;comma-dangle&quot;: [&quot;error&quot;, &quot;always&quot;],
        &quot;indent&quot;: [&quot;error&quot;, 2],
        &quot;no-cond-assign&quot;: [&quot;error&quot;, &quot;always&quot;],

        // disable now, but enable in the future
        &quot;one-var&quot;: &quot;off&quot;, // [&quot;error&quot;, &quot;never&quot;]

        // disable
        &quot;init-declarations&quot;: &quot;off&quot;,
        &quot;no-console&quot;: &quot;off&quot;,
        &quot;no-inline-comments&quot;: &quot;off&quot;,
    }
}</code></pre><h2 id="基于-glob-模式的配置"><a href="#基于-glob-模式的配置" class="headerlink" title="基于 glob 模式的配置"></a>基于 glob 模式的配置</h2><p>有时，你可能需要更精细的配置，比如，如果同一个目录下的文件需要有不同的配置。因此，你可以在配置中使用 <code>overrides</code> 键，它只适用于匹配特定的 glob 模式的文件，使用你在命令行上传递的格式 (e.g., <code>app/**/*.test.js</code>)。</p>
<h3 id="怎么工作"><a href="#怎么工作" class="headerlink" title="怎么工作"></a>怎么工作</h3><ul>
<li>Glob 模式覆盖只能在配置文件 (<code>.eslintrc.*</code> 或 <code>package.json</code>) 中进行配置。</li>
<li>模式应用于相对于配置文件的目录的文件路径。 比如，如果你的配置文件的路径为 <code>/Users/john/workspace/any-project/.eslintrc.js</code> 而你要检测的路径为 <code>/Users/john/workspace/any-project/lib/util.js</code>，那么你在 <code>.eslintrc.js</code> 中提供的模式是相对于 <code>lib/util.js</code> 来执行的.</li>
<li>在相同的配置文件中，Glob 模式覆盖比其他常规配置具有更高的优先级。 同一个配置中的多个覆盖将按顺序被应用。也就是说，配置文件中的最后一个覆盖会有最高优先级。</li>
<li>一个 glob 特定的配置几乎与 ESLint 的其他配置相同。覆盖块可以包含常规配置中的除了 <code>extends</code>、<code>overrides</code> 和 <code>root</code> 之外的其他任何有效配置选项，</li>
<li>可以在单个覆盖块中提供多个 glob 模式。一个文件必须匹配至少一个配置中提供的模式。</li>
<li>覆盖块也可以指定从匹配中排除的模式。如果一个文件匹配了任何一个排除模式，该配置将不再被应用。</li>
</ul>
<h3 id="相对-glob-模式"><a href="#相对-glob-模式" class="headerlink" title="相对 glob 模式"></a>相对 glob 模式</h3><pre><code>project-root
├── app
│   ├── lib
│   │   ├── foo.js
│   │   ├── fooSpec.js
│   ├── components
│   │   ├── bar.js
│   │   ├── barSpec.js
│   ├── .eslintrc.json
├── server
│   ├── server.js
│   ├── serverSpec.js
├── .eslintrc.json</code></pre><p><code>app/.eslintrc.json</code> 文件中的配置定义了 glob 模式 <code>**/*Spec.js</code>。该模式是相对 <code>app/.eslintrc.json</code> 的基本目录的。因此，该模式将匹配 <code>app/lib/fooSpec.js</code> 和 <code>app/components/barSpec.js</code> 但 <strong>不匹配</strong> <code>server/serverSpec.js</code>。如果你在项目根目录下的 <code>.eslintrc.json</code> 文件中定义了同样的模式，它将匹配这三个 <code>*Spec</code> 文件。</p>
<h3 id="配置示例"><a href="#配置示例" class="headerlink" title="配置示例"></a>配置示例</h3><p>在你的 <code>.eslintrc.json</code> 文件中：</p>
<pre><code>{
  &quot;rules&quot;: {
    &quot;quotes&quot;: [ 2, &quot;double&quot; ]
  },

  &quot;overrides&quot;: [
    {
      &quot;files&quot;: [ &quot;bin/*.js&quot;, &quot;lib/*.js&quot; ],
      &quot;excludedFiles&quot;: &quot;*.test.js&quot;,
      &quot;rules&quot;: {
        &quot;quotes&quot;: [ 2, &quot;single&quot; ]
      }
    }
  ]
}</code></pre><h2 id="在配置文件中注释"><a href="#在配置文件中注释" class="headerlink" title="在配置文件中注释"></a>在配置文件中注释</h2><p>JSON 和 YAML 配置文件格式都支持注释 ( <code>package.json</code> 文件不应该包括注释)。你可以在其他类型的文件中使用 JavaScript 风格的注释或使用 YAML 风格的注释，ESLint 会忽略它们。这允许你的配置更加人性化。例如：</p>
<pre><code>{
    &quot;env&quot;: {
        &quot;browser&quot;: true
    },
    &quot;rules&quot;: {
        // Override our default settings just for this directory
        &quot;eqeqeq&quot;: &quot;warn&quot;,
        &quot;strict&quot;: &quot;off&quot;
    }
}</code></pre><h2 id="指定需要检查的文件扩展名"><a href="#指定需要检查的文件扩展名" class="headerlink" title="指定需要检查的文件扩展名"></a>指定需要检查的文件扩展名</h2><p>目前，告诉 ESLint 哪个文件扩展名要检测的唯一方法是使用 <a href="https://link.jianshu.com?t=https://cn.eslint.org/docs/user-guide/command-line-interface#ext" target="_blank" rel="noopener"><code>--ext</code></a> 命令行选项指定一个逗号分隔的扩展名列表。注意，该标记只在与目录一起使用时有效，如果使用文件名或 glob 模式，它将会被忽略。</p>
<h2 id="忽略文件和目录"><a href="#忽略文件和目录" class="headerlink" title="忽略文件和目录"></a>忽略文件和目录</h2><p>你可以通过在项目根目录创建一个 <code>.eslintignore</code> 文件告诉 ESLint 去忽略特定的文件和目录。<code>.eslintignore</code> 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。例如，以下将忽略所有的 JavaScript 文件：</p>
<pre><code>**/*.js</code></pre><p>当 ESLint 运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个 <code>.eslintignore</code> 文件。如果发现了这个文件，当遍历目录时，将会应用这些偏好设置。一次只有一个 <code>.eslintignore</code> 文件会被使用，所以，不是当前工作目录下的 <code>.eslintignore</code> 文件将不会被用到。</p>
<p>Globs 匹配使用 <a href="https://link.jianshu.com?t=https://github.com/kaelzhang/node-ignore" target="_blank" rel="noopener">node-ignore</a>，所以大量可用的特性有：</p>
<ul>
<li>以 <code>#</code> 开头的行被当作注释，不影响忽略模式。</li>
<li>路径是相对于 <code>.eslintignore</code> 的位置或当前工作目录。这也会影响通过 <code>--ignore-pattern</code>传递的路径。</li>
<li>忽略模式同 <code>.gitignore</code> <a href="https://link.jianshu.com?t=http://git-scm.com/docs/gitignore" target="_blank" rel="noopener">规范</a></li>
<li>以 <code>!</code> 开头的行是否定模式，它将会重新包含一个之前被忽略的模式。</li>
</ul>
<p>除了 <code>.eslintignore</code> 文件中的模式，ESLint 总是忽略 <code>/node_modules/*</code> 和 <code>/bower_components/*</code> 中的文件。</p>
<p>例如：把下面 <code>.eslintignore</code> 文件放到当前工作目录里，将忽略 <code>node_modules</code>，<code>bower_components</code> 以及 <code>build/</code> 目录下除了 <code>build/index.js</code> 的所有文件。</p>
<pre><code># /node_modules/* and /bower_components/* ignored by default

# Ignore built files except build/index.js
build/*
!build/index.js</code></pre><h3 id="使用备用文件"><a href="#使用备用文件" class="headerlink" title="使用备用文件"></a>使用备用文件</h3><p>如果相比于当前工作目录下 <code>.eslintignore</code> 文件，你更想使用一个不同的文件，你可以在命令行使用 <code>--ignore-path</code> 选项指定它。例如，你可以使用 <code>.jshintignore</code> 文件，因为它有相同的格式：</p>
<pre><code>eslint --ignore-path .jshintignore file.js</code></pre><p>你也可以使用你的 <code>.gitignore</code> 文件：</p>
<pre><code>eslint --ignore-path .gitignore file.js</code></pre><p>任何文件只要满足标准忽略文件格式都可以用。记住，指定 <code>--ignore-path</code> 意味着任何现有的 <code>.eslintignore</code> 文件将不被使用。请注意，<code>.eslintignore</code> 中的匹配规则比 <code>.gitignore</code> 中的更严格。</p>
<h3 id="在-package-json-中使用-eslintConfig"><a href="#在-package-json-中使用-eslintConfig" class="headerlink" title="在 package.json 中使用 eslintConfig"></a>在 package.json 中使用 eslintConfig</h3><pre><code>{
  &quot;name&quot;: &quot;mypackage&quot;,
  &quot;version&quot;: &quot;0.0.1&quot;,
  &quot;eslintConfig&quot;: {
      &quot;env&quot;: {
          &quot;browser&quot;: true,
          &quot;node&quot;: true
      }
  },
  &quot;eslintIgnore&quot;: [&quot;hello.js&quot;, &quot;world.js&quot;]
}</code></pre><h3 id="忽略文件告警"><a href="#忽略文件告警" class="headerlink" title="忽略文件告警"></a>忽略文件告警</h3><p>当您将目录传递给 ESLint 时，文件和目录将被忽略。如果将特定文件传递给 ESLint，则会看到一条警告，指示该文件已被跳过。例如，假设你有一个 <code>.eslintignore</code> 文件，如下所示：</p>
<pre><code>foo.js</code></pre><p>然后，您执行：</p>
<pre><code>eslint foo.js</code></pre><p>您将会看到以下告警：</p>
<pre><code>foo.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override.

✖ 1 problem (0 errors, 1 warning)</code></pre><p>发生此消息是因为 ESLint 不确定是否要检查该文件。如消息所示，您可以使用 <code>--no-ignore</code> 省略使用忽略规则。</p>

            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="http://jixioakang.com" rel="external nofollow noreferrer">xkloveme</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="http://jixioakang.com/2018/03/12/2018-03-13-eslint-pei-zhi/">http://jixioakang.com/2018/03/12/2018-03-13-eslint-pei-zhi/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="http://jixioakang.com" target="_blank">xkloveme</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/tags/%E6%8A%80%E6%9C%AF/">
                                    <span class="chip bg-color">技术</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">

<div id="article-share">
    
    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
  #reward {
    margin: 40px 0;
    text-align: center;
  }

  #reward .reward-link {
    font-size: 1.4rem;
    line-height: 38px;
  }

  #reward .btn-floating:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
  }

  #rewardModal {
    width: 320px;
  }

  #rewardModal .reward-title {
    margin: 15px auto;
    padding-bottom: 5px;
  }

  #rewardModal .modal-content {
    padding: 10px;
  }

  #rewardModal .close {
    position: absolute;
    right: 15px;
    top: 15px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.3rem;
    line-height: 20px;
    cursor: pointer;
  }

  #rewardModal .close:hover {
    color: #ef5350;
    transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
  }

  #rewardModal .reward-tabs {
    margin: 0 auto;
    width: 210px;
  }

  .reward-tabs .tabs {
    height: 38px;
    margin: 10px auto;
    padding-left: 0;
  }

  .reward-content ul {
    padding-left: 0 !important;
  }

  .reward-tabs .tabs .tab {
    height: 38px;
    line-height: 38px;
  }

  .reward-tabs .tab a {
    color: #fff;
    background-color: #ccc;
  }

  .reward-tabs .tab a:hover {
    background-color: #ccc;
    color: #fff;
  }

  .reward-tabs .wechat-tab .active {
    color: #fff !important;
    background-color: #22ab38 !important;
  }

  .reward-tabs .alipay-tab .active {
    color: #fff !important;
    background-color: #019fe8 !important;
  }

  .reward-tabs .reward-img {
    width: 210px;
  }
</style>

<div id="reward">
  <a
    href="#rewardModal"
    class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red"
    >赏</a
  >

  <!-- Modal Structure -->
  <div id="rewardModal" class="modal">
    <div class="modal-content">
      <a class="close modal-close"><i class="fas fa-times"></i></a>
      <h4 class="reward-title">你的赏识是我前进的动力</h4>
      <div class="reward-content">
        <div class="reward-tabs">
          <ul class="tabs row">
            <li class="tab col s6 alipay-tab waves-effect waves-light">
              <a href="#alipay">支付宝</a>
            </li>
            <li class="tab col s6 wechat-tab waves-effect waves-light">
              <a href="#wechat">微 信</a>
            </li>
          </ul>
          <div id="alipay">
            <img
              src="/medias/reward/alipay.jpg"
              class="reward-img"
              alt="支付宝打赏二维码"
            />
          </div>
          <div id="wechat">
            <img
              src="/medias/reward/wechat.png"
              class="reward-img"
              alt="微信打赏二维码"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function() {
    $(".tabs").tabs();
  });
</script>

            
        </div>
    </div>

    
        <link rel="stylesheet" href="https://cdn.bootcss.com/gitalk/1.6.2/gitalk.min.css">
<link rel="stylesheet" href="/css/my-gitalk.css">

<div class="card gitalk-card" data-aos="fade-up">
    <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; left: 20px; top: 15px; padding-bottom: 5px;">
        <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
        <span>评论</span>
    </div>
    <div id="gitalk-container" class="card-content"></div>
</div>

<script src="https://cdn.bootcss.com/gitalk/1.6.2/gitalk.min.js"></script>
<script>
    let gitalk = new Gitalk({
        clientID: 'f1e60c7afa53a51926b5',
        clientSecret: '2430231be04e68f6ba8ccf331c537cc19f50a0bd',
        repo: 'xkloveme.github.io',
        owner: 'xkloveme',
        admin: "xkloveme",
        id: '2018-03-12T22-58-00',
        distractionFreeMode: false  // Facebook-like distraction free mode
    });

    gitalk.render('gitalk-container');
</script>
    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/2018/03/13/2018-03-14-vue-qian-duan-kuang-jia-mian-shi-wen-ti/">
                    <div class="card-image">
                        
                        
                        <img src="https://picsum.photos/600/300" class="responsive-img" alt="Vue前端框架面试问题">
                        
                        <span class="card-title">Vue前端框架面试问题</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            1、active-class 是哪个组件的属性？嵌套路由怎么定义？
答：vue-router 模块的 router-link 组件。

2、怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？答：在 router 目录下的
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2018-03-13
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/%E9%9D%A2%E8%AF%95/" class="post-category">
                                    面试
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/%E6%8A%80%E6%9C%AF/">
                        <span class="chip bg-color">技术</span>
                    </a>
                    
                    <a href="/tags/%E9%9D%A2%E8%AF%95/">
                        <span class="chip bg-color">面试</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/2018/02/26/2018-02-26-shu-zu-fang-fa/">
                    <div class="card-image">
                        
                        
                        <img src="https://picsum.photos/600/300" class="responsive-img" alt="数组方法">
                        
                        <span class="card-title">数组方法</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            前言：
定义：数组是值的有序集合。 JS的数组是无类型的，数组元素可以是任意类型，并且同一个数组的不同元素也可能有不同的类型，每一个值叫做元素（数组元素），每个元素在数组中有一个位置。数组在平常的coding中是比较常用的数据格式，尤其式在
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2018-02-26
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/" class="post-category">
                                    前端
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/%E6%8A%80%E6%9C%AF/">
                        <span class="chip bg-color">技术</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>


<script>
    $('#articleContent').on('copy', function (e) {
        // IE8 or earlier browser is 'undefined'
        if (typeof window.getSelection === 'undefined') return;

        var selection = window.getSelection();
        // if the selection is short let's not annoy our users.
        if (('' + selection).length < Number.parseInt('120')) {
            return;
        }

        // create a div outside of the visible area and fill it with the selected text.
        var bodyElement = document.getElementsByTagName('body')[0];
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        bodyElement.appendChild(newdiv);
        newdiv.appendChild(selection.getRangeAt(0).cloneContents());

        // we need a <pre> tag workaround.
        // otherwise the text inside "pre" loses all the line breaks!
        if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
            newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
        }

        var url = document.location.href;
        newdiv.innerHTML += '<br />'
            + '来源: 小康之家<br />'
            + '文章作者: xkloveme<br />'
            + '文章链接: <a href="' + url + '">' + url + '</a><br />'
            + '本文章著作权归作者所有，任何形式的转载都请注明出处。';

        selection.selectAllChildren(newdiv);
        window.setTimeout(function () {bodyElement.removeChild(newdiv);}, 200);
    });
</script>


<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/libs/codeBlock/codeLang.js"></script>

    
<!-- 代码块复制 -->

<script type="text/javascript" src="/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/libs/codeBlock/codeShrink.js"></script>


<!-- 代码块折行 -->

<style type="text/css">
code[class*="language-"], pre[class*="language-"] { white-space: pre !important; }
</style>

    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="https://cdn.bootcss.com/tocbot/4.10.0/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            // headingsOffset: -205,
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>



    <footer class="page-footer bg-color">
  <div class="container row center-align">
    <div class="col s12 m8 l8 copy-right">
      Copyright&nbsp;&copy;
      <span id="year">年份</span>
      <a href="http://jixioakang.com" target="_blank">xkloveme</a>
      |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
      <br />
       &nbsp;<i
        class="fas fa-chart-area"
      ></i
      >&nbsp;站点总字数:&nbsp;<span class="white-color"
        >141.5k</span
      >&nbsp;字      
      <span id="busuanzi_container_site_pv">
        |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span
          id="busuanzi_value_site_pv"
          class="white-color"
        ></span
        >&nbsp;次
      </span>
       
      <span id="busuanzi_container_site_uv">
        |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span
          id="busuanzi_value_site_uv"
          class="white-color"
        ></span
        >&nbsp;人
      </span>
      
      <br />
      
      <span id="sitetime">载入运行时间...</span>
      <script>
        function siteTime() {
          window.setTimeout("siteTime()", 1000);
          var seconds = 1000;
          var minutes = seconds * 60;
          var hours = minutes * 60;
          var days = hours * 24;
          var years = days * 365;
          var today = new Date();
          var startYear = "2017";
          var startMonth = "3";
          var startDate = "13";
          var startHour = "0";
          var startMinute = "0";
          var startSecond = "0";
          var todayYear = today.getFullYear();
          var todayMonth = today.getMonth() + 1;
          var todayDate = today.getDate();
          var todayHour = today.getHours();
          var todayMinute = today.getMinutes();
          var todaySecond = today.getSeconds();
          var t1 = Date.UTC(
            startYear,
            startMonth,
            startDate,
            startHour,
            startMinute,
            startSecond
          );
          var t2 = Date.UTC(
            todayYear,
            todayMonth,
            todayDate,
            todayHour,
            todayMinute,
            todaySecond
          );
          var diff = t2 - t1;
          var diffYears = Math.floor(diff / years);
          var diffDays = Math.floor(diff / days - diffYears * 365);
          var diffHours = Math.floor(
            (diff - (diffYears * 365 + diffDays) * days) / hours
          );
          var diffMinutes = Math.floor(
            (diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
              minutes
          );
          var diffSeconds = Math.floor(
            (diff -
              (diffYears * 365 + diffDays) * days -
              diffHours * hours -
              diffMinutes * minutes) /
              seconds
          );
          if (startYear == todayYear) {
            document.getElementById("year").innerHTML = todayYear;
            document.getElementById("sitetime").innerHTML =
              "本站已安全运行 " +
              diffDays +
              " 天 " +
              diffHours +
              " 小时 " +
              diffMinutes +
              " 分钟 " +
              diffSeconds +
              " 秒";
          } else {
            document.getElementById("year").innerHTML =
              startYear + " - " + todayYear;
            document.getElementById("sitetime").innerHTML =
              "本站已安全运行 " +
              diffYears +
              " 年 " +
              diffDays +
              " 天 " +
              diffHours +
              " 小时 " +
              diffMinutes +
              " 分钟 " +
              diffSeconds +
              " 秒";
          }
        }
        setInterval(siteTime, 1000);
      </script>
      
      <br />
      
    </div>
    <div class="col s12 m4 l4 social-link social-statis">
      
    <a href="https://github.com/xkloveme" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:xkloveme@gmail.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>





    <a href="https://twitter.com/xkloveme" class="tooltipped" target="_blank" data-tooltip="关注我的Twitter: https://twitter.com/xkloveme" data-position="top" data-delay="50">
        <i class="fab fa-twitter"></i>
    </a>









    <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>


    </div>
  </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/" + "search.xml", 'searchInput', 'searchResult');
});
</script>
    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="https://cdn.bootcss.com/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://cdn.bootcss.com/masonry/4.0.0/masonry.pkgd.min.js"></script>
    <script src="https://cdn.bootcss.com/aos/3.0.0-beta.6/aos.js"></script>
    <script src="https://cdn.bootcss.com/scrollprogress/3.0.2/scrollProgress.min.js"></script>
    <script src="https://cdn.bootcss.com/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-102352377-2"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());
    gtag('config', 'UA-102352377-2');
</script>


    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    

    

    
    <script type="text/javascript" src="/libs/background/ribbon-dynamic.js" async="async"></script>
    
    
    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
